<template>
  <div>
    <!-- <div class="header">{{ headtitle }}</div> -->
    <div class="header">商户入网</div>
    <div class="contentFirst" style="padding-top: 20px">
      <a-steps :current="getCurrentStep()">
        <a-step v-if="!videoLoad" title="信息填写" description />
        <a-step
          v-if="videoLoad"
          style="cursor: pointer"
          @click="goPage(1)"
          title="信息填写"
          description="点击修改"
        />
        <a-step v-if="!picLoad" title="资料上传" description />
        <a-step
          v-if="picLoad"
          style="cursor: pointer"
          @click="goPage(2)"
          title="资料上传"
          description="点击修改"
        />
        <a-step v-if="!otherLoad" title="其他信息" description />
        <a-step
          v-if="otherLoad"
          style="cursor: pointer"
          @click="goPage(3)"
          title="其他信息"
          description="点击修改"
        />
        <a-step title="业务配置" description />
        <a-step title="提交" description />
      </a-steps>
    </div>
    <!-- <div class="contentFirst">
      <a-steps :initial='4' :current="getCurrentStepFromFive()">
        <a-step title="资料上传" description />
        <a-step title="业务配置" description />
        <a-step title="资料审核" description />
      </a-steps>
    </div>-->
    <div class="content">
      <div style="height: 15px; width: 100%"></div>
      <router-view :key="key" />
    </div>
  </div>
</template>
<script>
export default {
  //  components: {
  //      ASteps,
  //     "a-step":ASteps.Step
  // }
  data() {
    return {
      headtitle: "",
      picLoad: false,
      videoLoad: false,
      otherLoad: false,
      lasttitle: "",
    };
  },
  computed: {
    key() {
      return this.$route.path + Math.random();
    },
  },
  watch: {
    $route(to, from) {
      console.log(to);
      if (
        to.path == "/OrgRegister/dataUploadA/step2" ||
        to.path == "/OrgRegister/dataUploadB/step2"
      ) {
        console.log("路由地址改变5");
        this.videoLoad = true;
      } else if (to.path == "/OrgRegister/step5") {
        console.log("路由地址改变6");
        this.videoLoad = false;
        this.picLoad = false;
        this.otherLoad = false;
      } else if (
        to.path == "/OrgRegister/configureA/step4" ||
        to.path == "/OrgRegister/configureB/step4"
      ) {
        this.picLoad = true;
        this.videoLoad = true;
        this.otherLoad = true;
      } else if (
        to.path == "/OrgRegister/otherDataA/step3" ||
        to.path == "/OrgRegister/otherDataB/step3"
      ) {
        this.picLoad = true;
        this.videoLoad = true;
        this.otherLoad = false;
      } else {
        this.videoLoad = false;
        this.picLoad = false;
        this.otherLoad = false;
      }
    },
  },
  created() {
    // this.lasttitle =
  },
  methods: {
    goPage(st) {
      console.log(this.$route.path);
      let routeList = this.$route.path.split("/");
      let routeListName = routeList[routeList.length - 2];
      if (st == 1) {
        // 第二跳第一
        if (routeListName && routeListName.indexOf("dataUpload") >= 0) {
          console.log(routeListName);
          let s = routeListName.replace("dataUpload", "");
          console.log("s", s);
          this.$router.replace({
            path: `/OrgRegister/userType${s}/step1`,
          });
        }
        // 第三跳第一
        if (routeListName && routeListName.indexOf("otherData") >= 0) {
          console.log(routeListName);
          let s = routeListName.replace("otherData", "");
          console.log("s", s);
          this.$router.replace({
            path: `/OrgRegister/userType${s}/step1`,
          });
        }
        // 第四跳第一
        if (routeListName && routeListName.indexOf("configure") >= 0) {
          console.log(routeListName);
          let s = routeListName.replace("configure", "");
          console.log("s", s);
          this.$router.replace({
            path: `/OrgRegister/userType${s}/step1`,
          });
        }
      } else if (st == 2) {
        // 第三跳第二
        if (routeListName && routeListName.indexOf("otherData") >= 0) {
          let s = routeListName.replace("otherData", "");
          console.log("s", s);
          this.$router.replace({
            path: `/OrgRegister/dataUpload${s}/step2`,
          });
        }
        // 第四跳第二
        if (routeListName && routeListName.indexOf("configure") >= 0) {
          let s = routeListName.replace("configure", "");
          console.log("s", s);
          this.$router.replace({
            path: `/OrgRegister/dataUpload${s}/step2`,
          });
        }
      } else if (st == 3) {
        // 第四跳第三
        if (routeListName && routeListName.indexOf("configure") >= 0) {
          let s = routeListName.replace("configure", "");
          console.log("s", s);
          this.$router.replace({
            path: `/OrgRegister/otherData${s}/step3`,
          });
        }
      }
    },
    getCurrentStep(e) {
      // console.log(this.$route.path)
      const pathname = this.$route.path;
      const pathList = pathname.split("/");
      const pathnameList = pathname.split("");
      // console.log(pathList)
      // console.log(pathnameList)
      // console.log("pathnameList[pathnameList.length-1]",pathnameList[pathnameList.length-1]);
      // console.log("pathnameList[pathnameList.length-1]",typeof pathnameList[pathnameList.length-1]);
      switch (pathnameList[pathnameList.length - 1]) {
        case "1":
          this.headtitle = "协议签署";
          break;
        case "2":
          this.headtitle = "在线注册";
          break;
        case "3":
          this.headtitle = "密码设置";
          break;
        case "4":
          this.headtitle = "账户激活";
          break;
        case "5":
          this.headtitle = "信息填写";
          break;
        case "6":
          this.headtitle = "认证视频";
          break;
        case "7":
          this.headtitle = "资料上传";
          break;
        case "8":
          this.headtitle = "资料审核";
          break;
        case "9":
          this.headtitle = "打款验证";
          break;
        case "10":
          this.headtitle = "完成";
          break;
      }
      var step = pathList[pathList.length - 1];
      if (step && step.indexOf("step") >= 0) {
        console.log("step", step);
        let s = step.replace("step", "");
        console.log("s1", s);
        if (s) {
          // console.log('parseInt(s) - 1', parseInt(s) - 1)
          return parseInt(s) - 1;
        }
      }
      return 0;
    },
    getCurrentStepFromFive(e) {
      // console.log(this.$route.path)
      const pathname = this.$route.path;
      const pathList = pathname.split("/");
      const pathnameList = pathname.split("");
      // console.log(pathList)
      // console.log(pathnameList)
      // console.log("pathnameList[pathnameList.length-1]",pathnameList[pathnameList.length-1]);
      // console.log("pathnameList[pathnameList.length-1]",typeof pathnameList[pathnameList.length-1]);
      switch (pathnameList[pathnameList.length - 1]) {
        case "6":
          this.headtitle = "认证视频";
          break;
        case "7":
          this.headtitle = "资料上传";
          break;
        case "8":
          this.headtitle = "资料审核";
          break;
        case "9":
          this.headtitle = "打款验证";
          break;
        case "10":
          this.headtitle = "完成";
          break;
      }
      var step = pathList[pathList.length - 1];
      if (step && step.indexOf("step") >= 0) {
        let s = step.replace("step", "");
        // console.log('s', s)
        if (s) {
          // console.log('parseInt(s) - 1', parseInt(s) - 1)
          return parseInt(s) - 1;
        }
      }
      return 0;
    },
  },
};
</script>
<style scoped>
.header {
  padding: 10px;
  text-align: center;
  font-weight: 500;
  color: #ffffff;
  font-size: 16px;
  background: #b3292c;
}

.contentFirst {
  width: 90%;
  margin: 0 auto;
  padding: 10px;
}

.content {
  width: 100%;
  margin: 0 auto;
  padding: 10px;
  background: #fff;
}

/* .ant-steps {
    display: table-cell;
  } */

/* .ant-steps-item {
    width: 200px;
    margin-top: 10px;
    flex: auto;
    -webkit-box-flex: inherit;
    overflow: hidden;
  }

  .ant-steps-item-tail {
    background-color: red;
  } */
</style>